body,html { padding: 0; margin: 0; overflow: hidden; position: relative; width: 100%; height: 100%; user-select: none; }

::-webkit-input-placeholder{color:#ccc;}
::-webkit-scrollbar-track-piece{background-color:none}
::-webkit-scrollbar{width:7px;height:10px}
::-webkit-scrollbar-thumb{outline:none; outline-offset:-2px; border:none; border-radius:6px; background-color:#505050; opacity:.5;}
/* ::-webkit-scrollbar-thumb:hover{-webkit-border-radius:6px;background-color:#505050} */

.p_abs { position: absolute; top: 0px; bottom: 0; left: 0; right: 0;}

.menu { height: 35px; position: absolute; left: 0; right: 0; background-color: #323232; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); z-index: 100000010; }
.menu .logo { width: 120px; height: 35px; line-height: 35px; float: left; text-align: center; line-height: 35px; color: #fff; font-size: 20px;} 
.menu .title { position: absolute; height: 35px; left: 0; right: 0; text-align: center;}
.menu .menu_box { float: left; height: 35px;}
.menu .menu_item { display: inline-block; position: relative; line-height: 35px; color: #ccc; cursor: pointer; font-size: 14px;}
.menu .menu_item span { display: block; width: 80px; text-align: center;}
.menu .menu_item span.active { background-color: #505050 !important; color: #fff !important; }
.menu .menu_item .sub_menu { position: absolute; width: 200px; left: 0px; top: 35px; padding: 7px 0; background-color: #222222; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);}
.menu .menu_item .sub_menu .subMenuItem { padding: 0 16px; font-size: 14px; line-height: 27px; }
.menu .menu_item .sub_menu .subMenuItem:hover { background-color: #505050; color: #fff; }
.menu .menu_item .sub_menu .subMenuItem .key { float: right; font-size: 12px; color: #ccc; line-height: 27px; }
.menu .menu_item .sub_menu .subMenuItem_block { border-top: 1px solid #252525; margin: 5px 0; border-bottom: 1px solid #505050; width: 100%; }

.moveBar { height: 100%; width: 4px; position: absolute; left: -1px; cursor: col-resize; z-index: 100000006;}
.moveBar:hover { background: rgba(255, 255, 255, 0.3);} 
.moveBar.active { background: rgba(255, 255, 255, 0.3);}

.viewer { top: 35px; right:300px; left: 250px; overflow: hidden; background: #666;}
.viewer .viewer_board { position: absolute; background-color: #fff;  will-change: transform;}
.viewer .viewer_layout { top: 20px; left: 20px; overflow: hidden; background: #1e1e1e;}
.viewer .moveMark { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 100000007; cursor: crosshair; }
.viewer .innerMark { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 100000007; }
.viewer .rulerCanvasX { position: absolute; height: 20px; z-index: 100000008; top: 0; left: 20px; background: #222; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);}
.viewer .rulerCanvasY { position: absolute; width: 20px; z-index: 100000008; top: 20px; left: 0; background: #222; box-shadow: 5px 0 5px rgba(0, 0, 0, 0.1);}

.resource { left: auto; width: 300px; background:#252525; top: 35px; z-index: 100000009; box-shadow: -5px 0 5px rgba(0, 0, 0, 0.1); }
.resource .resource_tab_title_box { height: 30px; background-color: #1f1f1f; width: 100%; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);}
.resource .resource_tab_body_box { top: 30px;}
.resource .resource_tab_title_item { display: inline-block; height: 30px; line-height: 30px; cursor: pointer; padding: 0 15px; min-width: 40px; text-align: center; color: #fff; font-size: 12px; color: #999;} 
.resource .resource_tab_title_item.active { background: #303030; color: #fff;}
.resource .resource_tab_body_item {display: none;}
.resource .resource_tab_body_item.active {display: block;}

.original { top: 35px; width: 250px; right: auto; background:#252525;}
.resource .fold_Layout,.original .fold_Layout { transition: all 0.3s; overflow: hidden; position: relative; }
.resource .fold_Layout .fold_Swith,.original .fold_Layout .fold_Swith { background: #303030; position: absolute; left: 0; right: 5px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); z-index: 2; color: #ccc; font-size: 12px; line-height: 25px; padding: 0 10px; height: 24px;}
.resource .fold_Layout .fold_Swith:hover,.original .fold_Layout .fold_Swith:hover { cursor: pointer; color: #fff;}
.resource .fold_Layout .fold_Swith i,.original .fold_Layout .fold_Swith i { margin: 0 10px 0 0; display: block; transform: scale(0.7); float: left; transition: transform 0.3s; font-style: normal; font-size: 10px; vertical-align: middle;} 
.resource .fold_Layout.active .fold_Swith,.original .fold_Layout.active .fold_Swith { color: #fff; background: #444444;}
.resource .fold_Layout.active .fold_Swith i,.original .fold_Layout.active .fold_Swith i { transform:scale(0.7) rotateZ(90deg); margin: -1px 10px 0 0;}
.resource .fold_Layout .fold_body,.original .fold_Layout .fold_body { border-bottom: 1px #555 solid; overflow-x: hidden; overflow-y: auto; top: 25px; position: absolute; right: 5px; left: 0px; background-color: #303030; box-shadow: inset 0px 4px 4px rgba(0,0,0,0.1); }
.resource .fold_Layout .fold_body::after,.original .fold_Layout .fold_body::after { clear: both; content: ''; display: block; height: 1px; width: 1px;}

.markEle { position: fixed; pointer-events: none; width: 70px; height: 90px;  z-index: 100000010; transform: translateX(-50%) translateY(-50%); }
.original .viewObject-sign, .markEle .viewObject-sign { cursor: pointer; width: 70px; color: #ccc; height: 65px; text-align: center; margin: 10px; padding: 5px 0; }
.original .viewObject-sign-img, .markEle .viewObject-sign-img { width: 50px; height: 40px; margin: 0 auto; border: 1px solid #ccc; font-size: 20px; line-height: 40px; text-align: center; }
.original .viewObject-sign-name, .markEle .viewObject-sign-name { line-height: 27px; height: 25px; font-size: 12px; }
.original .viewObject-sign:hover, .markEle .viewObject-sign:hover { background-color: #444444;}

.viewObject-block { position: absolute; }
.viewObject-block .viewObject-selectLine { position: absolute; border: 1px solid #0916c5; width: 100%; height: 100%; top: -1px; left: -1px; }
.viewObject-block .viewObject-mark { position: absolute; width: 8px; height: 8px; border: 1px solid #0916c5; background-color: #fff;}
.viewObject-block .viewObject-mark.top { top: -5px; cursor: n-resize;}
.viewObject-block .viewObject-mark.bottom { bottom: -5px; cursor: s-resize;}
.viewObject-block .viewObject-mark.right { right: -5px; cursor: e-resize;}
.viewObject-block .viewObject-mark.left { left: -5px; cursor: w-resize;}
.viewObject-block .viewObject-mark.middle.top { left: 50%; margin: 0 0 0 -5px;}
.viewObject-block .viewObject-mark.middle.bottom { left: 50%; margin: 0 0 0 -5px;}
.viewObject-block .viewObject-mark.middle.right { top: 50%; margin: -5px 0 0 0;}
.viewObject-block .viewObject-mark.middle.left { top: 50%; margin: -5px 0 0 0;}
.viewObject-block .viewObject-mark.left.top { cursor: nw-resize; }
.viewObject-block .viewObject-mark.right.top { cursor: ne-resize; }
.viewObject-block .viewObject-mark.left.bottom { cursor: sw-resize; }
.viewObject-block .viewObject-mark.right.bottom { cursor: se-resize; }

.viewObject-block .viewObject-moveBar { position: absolute; top: -40px; left: 50%; margin: 0 0 0 -11px; cursor: move; width: 20px; height: 20px; border: 1px solid #666; border: 1px solid #ccc; background-color: #fff; }
.viewObject-block .viewObject-SelectView { display: none; position: absolute; width: 100%; height: 100%; left: -1px; top: -1px; border: 1px solid #0916c5; }
.viewObject-block:hover .viewObject-SelectView { display: block; }





